<template>
  <table class="t-table__head">
    <colgroup>
      <li is="col" v-for="col in columns" :name="col.id" :style="`width: ${col.width}rem;`"></li>
    </colgroup>
    <thead>
      <tr>
        <th v-for="col in columns">{{ col.label }}</th>
      </tr>
    </thead>
  </table>
</template>

<script>
  export default {
    name: 'TTableHead',
    props: {
      border: Boolean,
      store: {
        required: true,
      },
    },
    computed: {
      columns() {
        return this.store.state.columns;
      },
    },
  };
</script>